<template>
	 <!-- Preloader Start -->
	 <!-- <div id="preloader">
        <div class="preloader--spinners">
            <div class="preloader--spinner preloader--spinner-1"></div>
            <div class="preloader--spinner preloader--spinner-2"></div>
        </div>
    </div> -->
    <!-- Preloader End -->

    <!-- Wrapper Start -->
    <div class="wrapper">
        <!-- Header Area Start -->
        <header id="header">
            <nav class="navbar">
                <div class="container">
                    <!-- Header Navbar Header Start -->
                    <div class="navbar-header">
                        <!-- Header Nav Toggle Button Start -->
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#headerNav" aria-controls="headerNav">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <!-- Header Nav Toggle Button End -->
                    
                        <!-- Header Custom Button Start -->
                        <a href="login.html" class="header--custom-btn btn--default hover">LOGIN</a>
                        <!-- Header Custom Button End -->
                        
                        <!-- Header Logo Start -->
                        <a href="index.html" class="navbar-brand">
                            <h1><span><i class="fa fm fa-server" style="color:blue;"></i></span><span style="color:blue;">COLOR</span>HOST</h1>
                        </a>
                        <!-- Header Logo End -->
                    </div>
                    <!-- Header Navbar Header End -->
                    
                    <!-- Header Custom Button Start -->
                    <a href="login.html" class="header--custom-btn btn--default hover">登录</a>
                    <!-- Header Custom Button End -->
                    
                    <!-- Header Nav Start -->
                    <div id="headerNav" class="navbar-collapse collapse">
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="index.html">首页</a></li>
                             <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">HOSTING<span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="shared-hosting.html">SHARED HOSTING</a></li>
                                    <li><a href="reseller-hosting.html">RESELLER HOSTING</a></li>
                                    <li><a href="vps-hosting.html">VPS HOSTING</a></li>
                                    <li><a href="dedicated-hosting.html">DEDICATED HOSTING</a></li>
                                </ul>
                            </li> 
                             <li><a href="domain.html">DOMAIN</a></li> 
                             <li class="dropdown active">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">PAGES<span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="about.html">ABOUT</a></li>
                                    <li><a href="faq.html">FAQ</a></li>
                                    <li><a href="testimonial.html">TESTIMONIAL</a></li>
                                    <li class="active"><a href="login.html">LOGIN</a></li>
                                    <li><a href="affiliate.html">AFFILIATE</a></li>
                                    <li><a href="404.html">404</a></li>
                                </ul>
                            </li> 
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">BLOG<span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="">BLOG</a></li>
                                    <li><a href="blog-details-left.html">BLOG DETAILS LEFT</a></li>
                                    <li><a href="blog-details-right.html">BLOG DETAILS RIGHT</a></li>
                                </ul>
                            </li>
                            <li><a href="contact.html">注册</a></li>
                        </ul>
                    </div>
                    <!-- Header Nav End -->
                </div>
            </nav>
        </header>
        <!-- Header Area End -->
        
        <!-- Page Header Area Start -->
        <div id="pageHeader" class="bg--overlay" data-bg-img="img/page-header-img/bg.png">
            <div class="container">
                <!-- Page Title Start -->
                <div class="page-header--title">
                    <h2>LOGIN PAGE</h2>
                </div>
                <!-- Page Title End -->
                
                <!-- Page Breadcrumb Start -->
                <div class="page-header--breadcrumb">
                    <ul class="breadcrumb">
                        <li><a href="index.html">HOME</a></li>
                        <li class="active">LOGIN</li>
                    </ul>
                </div>
                <!-- Page Breadcrumb End -->
            </div>
        </div>
        <!-- Page Header Area End -->
        
        <!-- Login Area Start -->
        <div id="login" class="bg--lightgrey">
            <div class="container">
                <div class="login--form">
                    <!-- Login Form Start -->
                    <form action="http://billing.ywhmcs.com/dologin.php?systpl=ColorHost" method="post">
                        <div class="form-group">
                            <label for="loginEmail">用户名</label>
                            <input type="email" name="username" class="form-control" id="loginEmail" placeholder="EMAIL">
                            <span class="highlight"></span>
                        </div>
                        
                        <div class="form-group">
                            <label for="loginPassword">密码</label>
                            <input type="password" name="password" class="form-control" id="loginPassword" placeholder="PASSWORD">
                            <span class="highlight"></span>
                        </div>

                        <button type="submit" class="btn--default hover">登录</button>
                        <a href="http://billing.ywhmcs.com/pwreset.php?systpl=ColorHost" class="btn--default hover">忘记密码</a>
                    </form>
                    <!-- Login Form End周老师，负责云平台的人生病了今天没来 -->
                </div>
            </div>
        </div>
        <!-- Login Area End -->
        
        <!-- Footer Area Start -->
        <footer id="footer">
            <!-- Footer Widgets Start -->
            <div class="footer--widgets bg--dark">
                <div class="container">
                    <div class="row">
                        <!-- Footer Widget Start -->
                        <div class="col-md-6 footer--widget fw--about">
                            <h4>ABOUT US</h4>
                            
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum quod mollitia quisquam. Architecto quam in atque sint voluptatem, consequatur consectetur ab ipsum maxime quod consequuntur excepturi illum dolorem ex modi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur animi id ex perspiciatis distinctio sequi minima...</p>
                            
                            <a href="about.html" class="more">Read More <i class="fa fa-angle-double-right"></i></a>
                            
                            <div class="fw--about-social">
                                <ul>
                                    <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                                    <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                                    <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                                    <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                                </ul>
                            </div>
                        </div>
                        <!-- Footer Widget End -->
                        
                        <!-- Footer Widget Start -->
                        <div class="col-md-3 col-sm-6 footer--widget fw--links">
                            <h4>SERVICES</h4>
                            
                            <ul>
                                <li><a href="#"><i class="fa fm fa-angle-right"></i>Shared Hosting</a></li>
                                <li><a href="#"><i class="fa fm fa-angle-right"></i>Reseller Hosting</a></li>
                                <li><a href="#"><i class="fa fm fa-angle-right"></i>VPS Hosting</a></li>
                                <li><a href="#"><i class="fa fm fa-angle-right"></i>Dedicated Hosting</a></li>
                            </ul>
                        </div>
                        <!-- Footer Widget End -->
                        
                        <!-- Footer Widget Start -->
                        <div class="col-md-3 col-sm-6 footer--widget fw--links">
                            <h4>USEFUL LINKS</h4>
                            
                            <ul>
                                <li><a href="#"><i class="fa fm fa-angle-right"></i>Example Link</a></li>
                                <li><a href="#"><i class="fa fm fa-angle-right"></i>Example Link</a></li>
                                <li><a href="#"><i class="fa fm fa-angle-right"></i>Example Link</a></li>
                                <li><a href="#"><i class="fa fm fa-angle-right"></i>Example Link</a></li>
                            </ul>
                        </div>
                        <!-- Footer Widget End -->
                    </div>
                </div>
            </div>
            <!-- Footer Widgets End -->
            
            <!-- Footer Copyright Start -->
            <div class="footer--copyright">
                <div class="container">
                    <p>Copyright &copy; 2018 <a href="http://www.bootstrapmb.com/">ColorHost</a>. All Rights Reserved.</p>
                </div>
            </div>
            <!-- Footer Copyright End -->
        </footer>
        <!-- Footer Area End -->
        
        <!-- Back To Top Button Start -->
        <div id="backToTop">
            <a href="#top"><i class="fa fa-angle-up"></i></a>
        </div>
        <!-- Back To Top Button End -->
    </div>
    <!-- Wrapper End -->
</template>

<script>
	import config from "@/config"
	import passwordForm from './components/passwordForm'
	import phoneForm from './components/phoneForm'
	import {setSystemGrey} from "@/utils/util";
	export default {
		components: {
			passwordForm,
			phoneForm,
		},
		data() {
			return {
				apiUrl:config.API_URL,
				encyCode:this.$route.query.encyCode,
				verifyCode:'',
				tecSupport:'',
				recordNumber:'',
				sysTitle:'',
				APP_NAME:'',
				VERSION:'',
				langFlag:'0',
				config: {
					lang: this.$TOOL.data.get('APP_LANG') || this.$CONFIG.LANG,
					dark: this.$TOOL.data.get('APP_DARK') || false
				},
				lang: [
					{
						name: '简体中文',
						value: 'zh-cn',
					},
					{
						name: 'English',
						value: 'en',
					}
				],
				WechatLoginCode: "",
				isWechatLoginResult: false,
				backImag:'',
				backImagArr:[],
				timer:null,
				findPass:'0',
				remUserPass:'0',
				isShow:false
			}
		},
		watch:{
			'config.dark'(val){
				if(val){
					document.documentElement.classList.add("dark")
					this.$TOOL.data.set("APP_DARK", val)
				}else{
					document.documentElement.classList.remove("dark")
					this.$TOOL.data.remove("APP_DARK")
				}
			},
			'config.lang'(val){
				this.$i18n.locale = val
				this.$TOOL.data.set("APP_LANG", val)
			},

		},
		created: function() {
			this.getSysInterfaceForLogin();
			this.$TOOL.cookie.remove("TOKEN")
			this.$TOOL.data.remove("USER_INFO")
			this.$TOOL.data.remove("MENU")
			this.$TOOL.data.remove("PERMISSIONS")
			this.$TOOL.data.remove("grid")
			this.$store.commit("clearViewTags")
			this.$store.commit("clearKeepLive")
			this.$store.commit("clearIframeList")
			// 每次进入界面时，先清除之前的所有定时器，然后启动新的定时器
			clearInterval(this.timer)
			this.timer = null
		},
		methods: {
			async getSysInterfaceForLogin(){
				let res = await this.$API.system.sysInterface.getSysInterfaceForLogin.get();
				if(res.code==200)
				{
					this.$TOOL.data.set("ATTACH_HOST", res.data.pageOfficeHost)
					this.$TOOL.data.set("OFFICE_TYPE", res.data.officetype)
					this.$TOOL.data.set("OFD_TYPE",res.data.ofdtype);
					this.$TOOL.data.set("OPEN_ON_LINE_FLAG",res.data.openOnLineFlag);
					this.$TOOL.data.set("SYSTEM_GREY",res.data.systemGrey);
					let greyJson = res.data.systemGrey;
					if(greyJson.greyStatus==='1')
					{
						setSystemGrey(greyJson.greyEndTime);
					}else{
						window.localStorage.removeItem("GREY_END_TIME");
					}
					this.remUserPass = res.data.remUserPass;
					this.findPass = res.data.findPass;
					if(this.remUserPass=='0')
					{
						this.$TOOL.cookie.remove("TOKEN");
						this.$TOOL.cookie.remove("AUTO_LOGIN");
						this.$TOOL.cookie.remove("ACCOUNT_ID");
						this.$TOOL.cookie.remove("PASS_WORD");
					}
					if(this.encyCode!=undefined&&this.encyCode!='')
					{
						var user = await this.$API.auth.token.post({encyCode:this.encyCode});
						if (user.code == 200) {
							this.$TOOL.cookie.set("TOKEN", user.data.token, {
								expires:24 * 60 * 60
							})
							this.$TOOL.data.set("USER_INFO", user.data.userInfo)
							this.$TOOL.data.set('APP_LANG', user.data.userInfo.language);
							this.$TOOL.data.set('APP_COLOR', user.data.userInfo.theme);
							this.$TOOL.data.set("MSG_TIME",user.data.msgtime);
						} else if (user.code == 300) {
							this.$router.replace({
								path: '/system/info'
							})
							return;
						} else if (user.code == 400) {
							this.$router.replace({
								path: '/resetPassword'
							})
							return;
						} else {
							this.islogin = false
							this.$message.warning(user.message)
							return false
						}
						//获取菜单
						var menu = await this.$API.system.menu.myMenus.get()
						if (menu.code == 200) {
							if (menu.data.menu.length == 0) {
								this.islogin = false
								this.$alert("当前用户无任何菜单权限，请联系系统管理员", "无权限访问", {
									type: 'error',
									center: true
								})
								return false
							}
							this.$TOOL.data.set("MENU", menu.data.menu)
							this.$TOOL.data.set("PERMISSIONS", [
								"list.add",
								"list.edit",
								"list.delete",
								"user.add",
								"user.edit",
								"user.delete"
							])
						} else {
							this.islogin = false
							this.$message.warning(menu.message)
							return false
						}
						this.$router.replace({
							path: '/'
						})
					}
					this.APP_NAME = res.data.APP_NAME;
					this.VERSION = res.data.VERSION;
					this.verifyCode = res.data.verifyCode;
					this.$CONFIG.APP_VER = res.data.VERSION;
					this.recordNumber = res.data.recordNumber;
					this.langFlag = res.data.langFlag;
					if(res.data.sysTitle!=undefined&&res.data.sysTitle!='')
					{
						this.sysTitle = res.data.sysTitle;
						this.$CONFIG.APP_NAME = res.data.sysTitle;
					}else {
						this.sysTitle=this.$CONFIG.APP_NAME;
					}
					this.$TOOL.data.set("APP_NAME",this.sysTitle)
					document.title = "登录 - "+this.$CONFIG.APP_NAME;
					config.APP_NAME = this.$CONFIG.APP_NAME;
					if(res.data.backgroundImg!=undefined&&res.data.backgroundImg!='')
					{
						let arr =res.data.backgroundImg.split(",");
						arr.forEach(item=>{
							this.backImagArr.push(item)
						})
						this.backImag = this.backImagArr[0];
					}else {
						this.backImagArr=['img/backgrounds/1.jpg','img/backgrounds/2.jpg','img/backgrounds/3.jpg','img/backgrounds/4.jpg'];
						this.backImag = this.backImagArr[0];
					}
					this.tecSupport = res.data.tecSupport;
					this.setTimer();
					this.isShow = true;
				}
			},
			configDark(){
				this.config.dark = this.config.dark ? false : true
			},
			configLang(command){
				this.config.lang = command.value
			},
			setTimer() {
				if(this.timer == null) {
					let count=1;
					let length = this.backImagArr.length;
					this.timer = setInterval( () => {
						this.backImag=this.backImagArr[(count%length)];
						count = count+1;
					}, 10000)
				}
			}
		}
	}
</script>
<style scoped>
	@import 'https://fonts.googleapis.com/css?family=Roboto%7COswald:300,400,700';
	@import 'http://cdn.bootstrapmb.com/bootstrap/3.3.7/css/bootstrap.min.css';
	@import './css/font-awesome.min.css';
	@import  './css/owl.carousel.min.css';
	@import './css/style.css';
	@import './css/responsive-style.css';
	@import './css/theme-color-1.css';
	@import './css/custom-style.css'
</style>
